<template>
  <div class="goods-list">
    <div class="goods-item" v-for="item in goodslist" :key="item.id">
      <a href="#">
        <router-link :to="{name: 'goods_info', params: {id: item.id}}">
          <img :src="item.image">
          <h1 class="title">{{ item.name }}</h1>
          <p class="info">
            <span class="price">¥{{ item.price }}</span>
            <span class="sell">剩余 {{ item.num }} 件</span>
          </p>
        </router-link>
      </a>
    </div>
    <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  props: ['category_id'],
  created () {
    this.getGoodsList()
  },
  data () {
    return {
      goodslist: [],
      last_id: 0
    }
  },
  methods: {
    getGoodsList () {
      window.console.log(this.category_id)
    },
    getMore () {
      this.getGoodsList()
    },
    getGoodsList () {
      this.$indicator.open({
        text: '加载中'
      })
      let params = { last_id: this.last_id, category_id: this.category_id }
      this.$http.get('goodslist', { params: params }).then(res => {
        this.$indicator.close()
        if (res.data.code === 1) {
          if (res.data.data.length > 0) {
            this.goodslist = this.goodslist.concat(res.data.data)
            this.last_id = res.data.data[res.data.data.length - 1].id
          } else if (this.goodslist.length > 0) {
            this.$toast('已经到达底部')
          } else {
            this.$toast('列表为空')
          }
        }
        window.console.log(res.data)
      })
    }
  }

}

</script>、

<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  .goods-item {
    width: calc(calc(100% / 2) - 10px);
    margin: 10px 10px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px;
    img {
      width: 100%;
    }
    .title {
      font-size: 14px;
      color: #333;
      margin: 10px 0;
    }
    .info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      .price {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
      .sell {
        font-size: 13px;
      }
      .more {
        margin: 15px 0;
        font-size: 14px;
      }
    }
  }
}
</style>